<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.d1 {
				width: 400px;
				height: 400px;
				border: 10px solid orange;
				position: absolute;
				top: 45%;
				left: 50%;
				/*使div以自身中心居中显示*/
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				background-color: yellow;
				z-index: 999;
			}

			.d2 {
				width: 400;
				height: 40px;
				background-color: pink;
				border-bottom: 10px solid orange;
			}

			.dd {
				background-color: black;
				opacity: 0.3;
				width: 1900px;
				height: 940px;
				z-index: 100;
				margin-top: -50px;
				margin-left: 0;
			}

			.b1 {
				font-size: 30px;
				background-color: #00FFFF;
				color: white;
				float: right;
				text-align: center;
				width: 40px;
				height: 40px;
				border: 1px solid red;
			}

			div {
				display: none;
			}
		</style>
	</head>
	<body>
		<input type="button" class="p1" value="弹出层" />

		<div class="d1">
			<div class="d2"><input type="button" class="b1" value="X" /></div>
		</div>
		<div class="dd"></div>
		<script>
			$(function() {
				$(".p1").click(function() {
					$(".dd").css("display", "block");
					$(".d1").show();
					$(".d2").show();
				})
				$(".b1").click(function() {
					$("div").css("display", "none");
				})
			})
		</script>
	</body>
</html>
